<!DOCTYPE html>
<html lang="zh-CN">

<head>
	{% include 'header_content' %}
    {{  'public.js' | public_assets_content  }}
    <link rel="stylesheet" type="text/css" href="{{ 'theme.css' | public_asset_abs_url }}">
    {% get_script_content route={template_route} scope=0 position=0 %}

    <style type="text/css">
		.module_unsubscribe_default {
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    height: 100vh;
				width:530px;
				margin: 0 auto;
		    text-align: center;
		}
		.module_unsubscribe_default .logo{
			margin-bottom: 60px;
		}
    	.module_unsubscribe_default .logo a{
		    font-size: var(--title_font_size);
		    color: var(--title_color);
		    font-family: var(--title_font_family);
		    font-style: var(--title_font_style);
		    font-weight: var(--title_font_weigth);
		    letter-spacing: var(--title_letter_spacing);
				display: inline-flex;
				align-items: center;
				line-height: 1;
		}
		.module_unsubscribe_default .logo span{
			font-weight: bold;

		}
		.module_unsubscribe_default .logo img{
		    max-height: 60px;
		    max-width: 300px;
		}
		.module_unsubscribe_default .logo img.favicon{
			width: 36px;
			height: 36px;
			margin-right: 16px;
		}
		.module_unsubscribe_default .module_unsubscribe_title{
			margin-bottom: 60px;
			color: var(--title_color);
			font-size: 24px;
			line-height: 1.3;
		}
		.module_unsubscribe_default .module_unsubscribe_form {
		    width: 400px;
		}
		.module_unsubscribe_default .code {
		    margin: 20px 0 0;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		}

		.module_unsubscribe_default .code .code_txt,
		.module_unsubscribe_default .unsubscribe_txt {
		    width: 100%;
		    height: 48px;
		    padding: 0 12px;
		    background-color: var(--color-input-background);
		    box-sizing: border-box;
		    border: 2px solid var(--color-input-background);
		    border-radius: var(--button_border_radius);
		    transition: all 0.5s;
		}

		.module_unsubscribe_default .code .code_txt:focus,
		.module_unsubscribe_default .unsubscribe_txt:focus {
		    border: 2px solid var(--color-main);
		}

		.module_unsubscribe_default .code .code_txt {
		    width: calc(100% - 160px);
		}

		.module_unsubscribe_default .code .code-img {
		    height: 48px;
		}

		.module_unsubscribe_default .unsubscribe_btn {
		    margin: 20px 0 0;
		}	

		.module_unsubscribe_default .tip {
		    padding: 10px 0 0;
		    color: #DC4845;
		    font-size: 14px;
		}
		.module_unsubscribe_default .unsubscribe_link{
			margin-top: 30px;
		}
		.module_unsubscribe_default .unsubscribe_link a{
			text-decoration: underline;
		    color: var(--color-main);
		    font-weight: 300;
		    display: inline-block;
		    text-align: center;
		}
		@media screen and (max-width: 767px){
			.module_unsubscribe_default{
				width: 100%;
			}
			.module_unsubscribe_default .module_unsubscribe_form{
				width: 100%;
				padding: 0 15px;
			}
			.module_unsubscribe_default .module_unsubscribe_title,
			.module_unsubscribe_default .logo{
				margin-bottom: 40px;
			}
			.module_unsubscribe_default .module_unsubscribe_title{
				font-size: 18px;
			}
		}
    </style>
</head>
<body>
<div class="module_unsubscribe_default" id="module_unsubscribe">
	<div class="module_unsubscribe_form">
		<div class="logo">
				<a>
					{% if storeConfig.logo %}
		      		<img src="{{ storeConfig.logo}}">
					{% else %}
		      		{% if storeConfig.favicon %}<img class="favicon" src="{{ storeConfig.favicon }}" >{% endif %}
		      		<span class="shop_name">{{ storeConfig.name }}</span>
		      		{% endif %}
				</a>
			</div>
		<div class="module_unsubscribe_title">{{ lang.general.unsubscribe }}</div>
		<input type="hidden" name="type" value="{{ type }}">
		<input class="unsubscribe_txt" type="text" name="email" placeholder="{{ lang.general.email }}">
		<div class="code">
			<input class="code_txt" type="text" name="code" value="{{ email }}" placeholder="{{ lang.general.verification_code }}">
			<img class="code-img" src="/code" onclick="this.src='/code?'+Math.random();" />
		</div>
		<input class="unsubscribe_btn main_btn form_btn" type="button" name="unsubscribe_submit" value="{{ lang.general.confirm }}">
		<div class="unsubscribe_link"><a href="/">{{ lang.general.return_to_home_page }}</a></div>
	</div>
</div>
<script type="text/javascript">
	$(function(){
		$('.unsubscribe_btn').click(function(){
			if(formValidation()){
				moi.ajax({
					type: 'PUT',
					url: '/module/unsubscribe',
					dataType: 'json',
					data: JSON.stringify(getJsonData()),
					success: function(res){
						if(res.code==0){
							moi.message({
								type: "success",
					            content: res.msg,
					            link: "/",
					            timer: 2000,
							})
						}else if(res.code==501){
							moi.message({
								type: "error",
					            content: res.msg,
					            timer: 2000,
							})
						}
					}
				})
			}
		})
		$(document).on('keydown','input[name="email"]',function(){
            $(this).siblings('.tip').remove();
        });
        $(document).on('keydown','input[name="code_txt"]',function(){
            $(this).parent().siblings('.tip').remove();
        });
	})
	function formValidation(){
        var unsubscribeText = $('input[name="email"]');
        var codeText = $('input[name="code"]');
        var is_submit = true;
        if(!$.trim(unsubscribeText.val()) )
        {

        	if(unsubscribeText.next('.tip').length == 0){
                unsubscribeText.after('<div class="tip">{{ lang.general.please_enter_email }}</div>');
            }else{
            	unsubscribeText.next('.tip').html('{{ lang.general.please_enter_email }}');
            }

            is_submit = false;
        }
        if(!$.trim(codeText.val()) )
        {
        	if(codeText.next('.tip').length == 0){
                codeText.parent().after('<div class="tip">{{ lang.general.please_enter_code }}</div>');
            }else{
            	codeText.parent().next('.tip').html('{{ lang.general.please_enter_code }}');
            }
            is_submit = false;
        }
        if($.trim(unsubscribeText.val())!='')
        {
            if(!checkEmail($.trim(unsubscribeText.val())))
            {
            	if(unsubscribeText.next('.tip').length == 0){
	                unsubscribeText.after('<div class="tip">{{ lang.general.email_is_invalid }}</div>');
	            }else{
	            	unsubscribeText.next('.tip').html('{{ lang.general.email_is_invalid }}');
	            }
                is_submit = false;
            }

        }
        return is_submit;
     }
	function getJsonData(){
		var json = {
			"email": $('input[name="email"]').val(),
			"type": $('input[name="type"]').val(),
			"code": $('input[name="code"]').val()
		}
		return json;
	}
	function checkEmail(value){return/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value)
    }
</script>
</body>

</html>